.card-img-top {
width: 100%;
height: 15vw;
object-fit: cover;
}<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div><div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div><div class="card mb-3">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img class="card-img-bottom" src="..." alt="Card image cap">
</div>. . .
<div class="row row-content">
<div class="col-sm-6">
<h3>Our Mission</h3>
<p>We present a curated database of the best campsites in the vast woods and backcountry of the World Wide Web Wilderness. We increase access to adventure for the public while promoting safe and respectful use of resources. The expert wilderness trekkers on our staff personally verify each campsite to make sure that they are up to our standards. We also present a platform for campers to share reviews on campsites they have visited with each other.</p>
</div>
<div class="col-sm-6">
<div class="card">
<h3 class="card-header bg-primary text-white">Facts At a Glance</h3>
<div class="card-body">
<dl class="row">
<dt class="col-6">Founded</dt>
<dd class="col-6">February 3, 2016</dd>
<dt class="col-6">No. of Campsites in 2019</dt>
<dd class="col-6">563</dd>
<dt class="col-6">No. of Reviews in 2019</dt>
<dd class="col-6">4388</dd>
<dt class="col-6">Employees</dt>
<dd class="col-6">42</dd>
</dl>
</div>
</div>
</div>
<div class="col">
<div class="card bg-light mt-3">
<blockquote class="blockquote card-body">
<p class="mb-0">I will not follow where the path may lead, but I will go where there is no path, and I will leave a trail.</p>
<footer class="blockquote-footer">Muriel Strode,
<cite title="Source Title">"Wind-Wafted Wild Flowers" -
The Open Court, 1903
</cite>
</footer>
</blockquote>
</div>
</div>
</div>
. . .